import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input, Select, DatePicker, Table, Button, TreeSelect, Popconfirm, Row, Col, } from 'antd';
var _this, _props, _state;
import SecondBorrowModal from '../../components/borrow/SecondBorrowModal';
const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;

class AddBorrowModal extends Component {
  constructor(props) {
    super(props);
  }

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
        if (values.borrowReturnDetail.length == 0) {
          Modal.warning({
            title: '提示',
            content: '未添加借用信息',
          })
        } else {
          for (var i = 0; i < values.borrowReturnDetail.length; i++) {
            if (values.borrowReturnDetail[i].targetManageBranchId == undefined || values.borrowReturnDetail[i].targetManageBranchId == null) {
              Modal.warning({
                title: '提示',
                content: '有未完成的借用单',
              })
              return;
            }
            values.borrowReturnDetail[i].assetId = values.borrowReturnDetail[i].assetId_;
          }
          onOk(values);
        }
      }
    });
  };


  //点击增加
  onAddDetail = () => {
    const { onAddDetail ,dispatch} = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'borrow/queryAssetList',
          payload: values,
        })
      }
    });
  };

  //点击借用弹出添加详情页
  onOpenBorrow = (data) => {
    const { dispatch } = this.props;
      dispatch({
          type: 'borrow/qryAssetById',
          payload: data,
      })
  };


  render() {
    const { children, dispatch, assetType, id, assetList, roomList, assetBrandList, userList, item, borrowReturnDetail } = this.props;

    const { getFieldDecorator } = this.props.form;

    const getUser = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    })

    const columns = [{
      title: '资产编号',
      dataIndex: 'assetNo',
      key: 'assetNo',
      fixed: 'left',
      width: 150
    }, {
      title: '资产分类',
      dataIndex: 'typeName',
      key: 'typeName',
      width: 120
    }, {
      title: '设备名称',
      dataIndex: 'assetName',
      key: 'assetName',
      width: 150
    }, {
      title: '设备型号',
      dataIndex: 'modelName',
      key: 'modelName',
      width: 120,
    }, {
      title: '设备序列号',
      dataIndex: 'serialNo',
      key: 'serialNo',
      width: 150,
    }, {
      title: 'RFID编码',
      dataIndex: 'rfidNo',
      key: 'rfidNo',
      width: 120,
    },
    {
      title: '机房',
      dataIndex: 'roomName',
      key: 'roomName',
      width: 160,
    }, {
      title: '机柜',
      dataIndex: 'rackName',
      key: 'rackName',
      width: 120,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      render: (value, row, index) => {
        return (
          value == 1 ? "在库" : value == 2 ? "已上架" : value == 3 ? "已报废" : ''
        )
      }
    },
    {
      title: '借用类型',
      dataIndex: 'borrowType',
      key: 'borrowType',
      width: 100,
      render: (value, row, index) => {
          return (
              value == 1 ? "内部借用" : value == 2 ? "外部借用" : ''
          )
      }
  },
    {
      title: '目标管理部门',
      dataIndex: 'targetManageBranchName',
      key: 'targetManageBranchName',
      width: 120,
    }, {
      title: '目标领用部门',
      dataIndex: 'targetUseBranchName',
      key: 'targetUseBranchName',
      width: 120,
    },
    {
      title: '目标领用人',
      dataIndex: 'targetEndUserName',
      key: 'targetEndUserName',
      width: 100,
    },
    {
      title: '备注',
      dataIndex: 'returnRemark',
      key: 'returnRemark',
      width: 150,
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 80,
      render: (text, record) => (
        <span>
          <a onClick={this.onOpenBorrow.bind(null, record)}>借用详情</a>
        </span>
      ),
    }];

    return (
      <span>
        <Modal
          maskClosable={this.props.maskClosable}
          confirmLoading={this.props.confirmLoading}
          title={this.props.title}
          width={1000}
          zIndex={100}
          visible={this.props.visible}
          onOk={this.okHandler}
          onCancel={this.props.onCancel}
          key={this.props.newKey}
        >
          <div style={{ backgroundColor: '#fff' }}>
            <div style={{}}>
              <div style={{ width: '100%', backgroundColor: '#fff', paddingLeft: '20px' }}>
                <Form layout={'inline'} style={{ marginTop: '-16px' }}>
                  <FormItem style={{ marginBottom: '0px' }}>
                    {getFieldDecorator('borrowReturnDetail', { initialValue: borrowReturnDetail })(
                      <Input type="hidden" />
                    )}
                  </FormItem>

                  <Row gutter={16}>
                    <Col span={8}>
                      <FormItem
                        label="单号"
                        hasFeedback
                      >
                        {
                          getFieldDecorator('id', {
                            initialValue: id,
                          })(<Input readOnly="readOnly" style={{ width: '180px' }} />)
                        }
                      </FormItem>
                    </Col>

                    <Col span={8}>
                      <FormItem
                        label="操作人"
                        hasFeedback
                      >
                        {getFieldDecorator('operatorBy', {
                          rules: [{
                            required: true, whitespace: true, message: '请选择操作人',
                          }]
                        })(
                          <Select
                            showSearch
                            style={{ width: 180 }}
                            placeholder="选择操作人"
                            optionFilterProp="children"
                          >
                            {getUser(userList)}
                          </Select>
                          )}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem
                        label="预计执行时间"
                        hasFeedback
                      >
                        {getFieldDecorator('executeTime', {
                          rules: [{
                            required: true, type: 'object', whitespace: true, message: '请选择预计执行时间',
                          }]
                        })(
                          <DatePicker style={{ width: 190 }} />
                          )}

                      </FormItem>
                    </Col>
                  </Row>
                  <Row style={{ marginTop: '20px' }}>
                    <Col span={24}>
                      <FormItem
                        label="备注"
                        hasFeedback
                      >
                        {
                          getFieldDecorator('remark', {
                            rules: [{ max: 200, message: '备注信息 200 字符以内' },]
                          })(<Input style={{ width: '890px' }} type="textarea" autosize={{ minRows: 3, maxRows: 3 }} />)
                        }
                      </FormItem>
                    </Col>
                  </Row>
                  <Row style={{ marginTop: '15px' }}>
                    <Col span={24}>
                      <hr style={{ width: '926px', height: '0px', borderTop: '1px solid #e9e9e9', borderRight: '0px', borderBottom: '0px', borderLeft: '0px' }} />
                    </Col>
                  </Row>
                  <Row>
                    <Col span={24}>
                      <div style={{ width: '100%', height: '100%', marginTop: '15px', marginBottom: '5px', textAlign: 'right', paddingRight: '10px' }}>
                        <FormItem>
                          <Button type="primary" size='large' onClick={this.onAddDetail}>新增明细</Button>
                        </FormItem>
                      </div>
                    </Col>
                  </Row>

                  <div style={{}}>
                    <div style={{ width: '100%', padding: "10px 20px 20px 0px", }}>
                      <Table columns={columns}
                        rowKey={record => record.id_}
                        dataSource={borrowReturnDetail}
                        pagination={false}
                        scroll={{ x: 2000 }}
                      />
                    </div>
                  </div>
                </Form>
              </div>

            </div>
          </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(AddBorrowModal)
